<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   <div class="root">
   <!-- Model:数据类型,试图渲染 ,视图渲染
    EX:module、mode、model、modal 
    EX:module模块，module.exports 
    EX:mode模式，development、production、staging/test 
    EX:model模型:v-model 
    EX:modal模态  -->
    <!-- TODO:单项数据绑定 -->
    <p>{{title}}</p>


    <!--  TODO:还是单向数据绑定 （数据只能从data流向模板页面）  -->

    <!-- 只要是监听就是on 
     回想原生javascript，回想jquery，回想react 
     原生模式：<input onclick> 
     jquery：$('xxx').on('click') 
    react <input onClick={xxx}> -->
    v-bind:
    <input
        type="text"
        placeholder="数据绑定"
        v-bind:value="title"/>
    <br />


     <!-- 双向数据绑定，一般都是针对表单类元素的 -->
      <!-- HTML表单元素主要包括input、select、textarea三大类，而input中的type类型非常的多，包括text、tel、checkbox、radio、file等 -->
      <!-- TODO: 双向数据绑定，从M到V，再从V到M  -->
    v-model:<input
    type="text"
    placeholder="双向数据绑定"
    v-model:value="title"/>
  <br />


       <!--  TODO:双向数据绑定的缩写方式 -->
    v-model:<input
      type="text"
      placeholder="双向数据绑定"
      v-model="title"
   /><br />


<!--  TODO:普通元素无法实现v-model双向绑定操作功能 -->
    <!-- <div v-model="title"></div> -->
  </div>

  <script>
    new Vue({
      el:"root",
      data:{
        title:'Vuee',
        url:'http://www.baidu.com',
      },
    })
  </script>


</body>
</html>